{

    const _constructor = function () {
        return {
            data: {
                name : 'checkbox',
                title: '多选框',
                items : [{
                    checked : false,
                    text : 'option'
                },{
                    checked : false,
                    text : 'option'
                },{
                    checked : false,
                    text : 'option'
                }]
            },

            methods: { 
                getValue : function () {
                    let val = [];
                    this.items.forEach((item, index) => {
                        if ( item.checked === true ) {
                            val.push(index);
                        }
                    });
                    return val;
                },
                
                getField : function () {
                    return this.name;
                }
            }
        }
    }

    const checkbox = {  
        elementTemplate : `
                    <div class="form-group">
                        <label>{{title}}</label> 
                        <div class="group-box">     
                            <div class="checkbox" v-for="(item, index) in items">
                              <label>
                                <input type="checkbox" v-model="item.checked" :name="name" :value="item.index"> {{item.text}}
                              </label>
                            </div>
                        </div>
                    </div>
        `,
        prototypeTemplate : `
                    <div class="form-group">
                        <label >请输入字段名(唯一):</label>
                        <input type="text" class="form-control input-sm" v-model="name">
                    </div>

                    <div class="form-group">
                        <label >多选框的标题:</label>
                        <input type="text" class="form-control input-sm" v-model="title">
                    </div>
                     
                    <a class="btn btn-default btn-xs" href="javascript:void('');" role="button" v-on:click="items.push({checked:false,text:'new Option'})">Add</a>
                    
                    <div class="form-inline" v-for="(item, index) in items" >
                        <div class="form-group col-md-12" >
                            <div class="input-group col-md-10" style="margin-top:5px; ">
                              <input type="text" class="form-control input-sm" v-model="item.text" >
                              <span class="input-group-btn">
                                <button type="button" class="close" aria-label="Close" v-on:click="items.splice(index, 1)"><span aria-hidden="true">&times;</span></button>
                              </span>
                            </div>
                        </div>
                    </div>
        `,
        _constructor : _constructor 
    }


    if ( window.TEMPLATE && !window.TEMPLATE.checkbox ) {
        window.TEMPLATE.checkbox = checkbox
    }
}